<template>
<div>
    <button @click="showDonghua">显示/隐藏</button>
    <h1 v-show="isShow" :class="donghuaInfo">你好啊！</h1>
</div>
</template>

<script>

export default {
    name:'Test',
    data() {
        return {
            isShow:true,
            donghuaInfo:'come' //默认是来的动画效果
        };
    },
    methods:{
        showDonghua(){
            //判断动画效果，切换
            if(this.donghuaInfo == 'come'){
                this.donghuaInfo = 'go'
            }else{
                this.donghuaInfo = 'come'
            }
        }
    }
}
</script>
<style scoped>
    h1{
        background-color: orange;
    }

    /* 来的时候播放哪个动画
        linear--匀速  reverse--取反 */
    .come{
        animation: donghua1 1s linear;
        background-color: yellow;
    }
    .go{
        animation: donghua1 1s linear reverse;
        background-color: blue;
    }
    /* 定义关键帧--起一个名字 */
    @keyframes donghua1{
        from{
            transform: translateX(-100%);
        }
        to{
            transform: translateX(0px);
        }
    }
</style>